<template>
  <div class="main help-main">
    <div class="content-box flex">
      <div class="navbar">
        <div class="search-bar pad-l-10 pad-r-10 pad-t-20 mar-b--21">
          <el-input
            placeholder="输入关键词后按回车搜索"
            v-model="searchListQuery.keyword"
            @keyup.enter.native="searchElach"
            class="input-search"
            clearable>
          </el-input>
        </div>
        <!-- 分类 -->
        <ul class="font-18">
          <li
            v-for="item in helpTypeDTOS"
            :key="item.helpTypeId"
            :class="searchListQuery.helpTypeId === item.helpTypeId ? 'active' : ''"
            @click="changeHelpTypeId(item.helpTypeId)">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div
        class="r-list bg-color-white border-radius-5 flex-item"
        v-if="showDetailFlag == '0'">
        <div class="btn-tab">
          <span :class="type == '0' ? 'active' : ''" @click="typeChange('0')">全部</span>
          <span :class="type == '1' ? 'active' : ''" @click="typeChange('1')">最近</span>
        </div>
        <div v-if="type == '0'">
          <ul>
            <li v-for="(item, index) in helpList" :key="index" @click="goDetail(item)">
              <h2>{{ item.title }}~</h2>
              <div class="flex v-align-c">
                <span class="pad-r-25">发布时间 {{ item.createTime }}</span>
                <span class="flex-item">最后更新 {{ item.updateTime }}</span>
                <span> {{ item.author }}</span>
              </div>
            </li>
          </ul>
          <el-pagination
            class="text-align-r"
            background
            layout="prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchListQuery.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchListQuery.size"
            :total="total">
          </el-pagination>
        </div>
        <div v-if="type == '1'">
          <ul>
            <li @click="goDetail(item)" v-for="(item, index) in helpEnterpriseList" :key="index">
              <h2>{{ item.title }}~</h2>
              <div class="flex v-align-c">
                <span class="pad-r-25">发布时间 {{ item.createTime }}</span>
                <span class="flex-item">最后更新 {{ item.updateTime }}</span>
                <span> {{ item.author }}</span>
              </div>
            </li>
          </ul>
          <el-pagination
            class="text-align-r"
            background
            layout="prev, pager, next"
            @size-change="myHandleSizeChange"
            @current-change="myHandleCurrentChange"
            :current-page="mySearchListQuery.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="mySearchListQuery.size"
            :total="mytotal">
          </el-pagination>
        </div>
      </div>
      <div v-if="showDetailFlag == '1'"
        class="r-content bg-color-white border-radius-5 flex-item"
        v-html="context"></div>
    </div>
  </div>
</template>

<script>
import {
  listHelpType,
  pagingHelp,
  pagingHelpEnterprise,
  addHelpEnterprise
} from '@/api/document/help.js'

export default {
  data() {
    return {
      search: '',
      searchListQuery: {
        helpTypeId: '',
        currentPage: 1,
        size: 10,
        keyword: ''
      },
      mySearchListQuery: {
        enterpriseId: this.getEnterpriseId(),
        currentPage: 1,
        size: 10,
        title: ''
      },
      total: 0,
      mytotal: 0,
      type: 0,
      helpTypeDTOS: [],
      helpList: [],
      helpEnterpriseList: [],
      listData: [],
      category: 0,
      showDetailFlag: '0',
      context: ''
    }
  },
  created() {
    console.log('help')
    this.initHelpType()
    this.initHelpList()
  },
  mounted() {},
  methods: {
    initHelpType() {
      listHelpType().then(response => {
        const helpTypeDTOS = response.data.helpTypeDTOS
        this.helpTypeDTOS = helpTypeDTOS
      })
    },
    initHelpList() {
      const searchListQuery = this.searchListQuery
      pagingHelp(searchListQuery).then(response => {
        this.total = response.total
        this.helpList = response.records
        this.listLoading = false
      })
    },
    initEnterpriseHelp() {
      const mySearchListQuery = this.mySearchListQuery
      pagingHelpEnterprise(mySearchListQuery).then(response => {
        this.mytotal = response.total
        this.helpEnterpriseList = response.data.records
      })
    },
    searchElach(val) {
      this.searchListQuery.currentPage = 1
      this.searchListQuery.page = 1
      this.searchListQuery.size = 10
      this.showDetailFlag = '0'
      this.type = '0'
      this.searchListQuery.helpTypeId = ''
      this.initHelpList()
    },
    typeChange(e) {
      this.searchListQuery.helpTypeId = ''
      this.searchListQuery.keyword = ''
      if (e === '0') {
        this.type = '0'
        this.initHelpList()
      }
      if (e === '1') {
        this.type = '1'
        this.initEnterpriseHelp()
      }
    },
    goDetail(item) {
      this.showDetailFlag = '1'
      this.context = item.context

      const data = {
        enterpriseId: this.getEnterpriseId(),
        helpId: item.helpId
      }
      addHelpEnterprise(data).then(response => {
        if (response.isError) return
      })
    },
    changeHelpTypeId(helpTypeId) {
      this.search = ''
      this.searchListQuery.helpTypeId = helpTypeId
      this.searchListQuery.keyword = ''
      this.searchListQuery.currentPage = 1
      this.initHelpList()
      this.showDetailFlag = '0'
      this.type = '0'
    },
    // 更改当前页数
    handleCurrentChange(val) {
      this.searchListQuery.currentPage = val
      this.initHelpList()
    },
    // 更改当前页面大小
    handleSizeChange(val) {
      this.searchListQuery.size = val
      this.initHelpList()
    },
    // 更改当前页数
    myHandleCurrentChange(val) {
      this.mySearchListQuery.currentPage = val
      this.initEnterpriseHelp()
    },
    // 更改当前页面大小
    myHandleSizeChange(val) {
      this.mySearchListQuery.size = val
      this.initEnterpriseHelp()
    }
  }
}
</script>

<style lang="less" scoped>
  .main {
    background: #fff;
    min-height: 100vh;
  }
  .content-box {
    width: 100%;
    min-width: 1360px;
    min-height: 700px;
    ul {
      padding: 0;
      li {
        list-style: none;
      }
    }
    .navbar {
      width: 330px;
      min-height: 100vh;
      background: #fafafa;
      border-right: #cecece 1px solid;
      box-sizing: border-box;
      ul{
        padding: 17px 0;
        margin-bottom: 0px;
        li {
          padding: 22px 30px 22px 30px;
          cursor: pointer;
          &.active {
            color: #409eff;
          }
        }
      }      
    }
    .r-list {
      padding: 20px 40px 20px 40px;
      .btn-tab {
        span {
          display: inline-block;
          padding: 5px 30px;
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
          color: #666666;
          &.active {
            background: #409eff;
            color: #fff;
            border-radius: 100px;
          }
        }
      }
      ul {
        li {
          background: #fafafa;
          padding: 18px 14px;
          margin-bottom: 20px;
          cursor: pointer;
          h2 {
            margin: 0 0 10px 0;
            font-size: 18px;
          }
          &:hover {
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
          }
        }
      }
    }
    .r-content {
      padding: 20px 40px 20px 40px;
      font-size: 15px;
      line-height: 1.6;      
      overflow: hidden;
    }
  }
</style>
